<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{_fragments::head(~{::title})}">
    <title>关于我</title>
</head>
<body>

<!--    导航-->
<div th:replace="~{_fragments::menu(5)}"></div>


<!--    中间内容-->
<div class="m-container m-padded-tb-big animate__animated  animate__fadeIn">
    <div class="ui container">

        <div class="ui stackable grid">

            <div class="eleven wide column">
                <div class="ui segment">
                    <img class="ui rounded image" src="https://picsum.photos/id/1021/800/600" alt="图片">
                </div>
            </div>

            <div class="five wide column">

                <div class="ui top attached segment">
                    <div class="ui header">关于我</div>
                </div>

                <div class="ui attached segment">
                    <p class="m-text-thin">赵玉龙，一个独立开发者，折腾在0和1世界的大叔；一个终身学习者，誓将学习无限循环，希望结识可以共同成长的小伙伴。</p>
                    <p class="m-text-thin">热爱编程，喜欢折腾，正在探索高效学习编程技术的方法...</p>
                </div>

                <div class="ui attached segment">
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">编程</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">读书</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">学习</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">思考</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">运动</div>
                </div>

                <div class="ui attached segment">
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Java</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">C</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Android</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">MySQL</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">...</div>
                </div>

                <div class="ui bottom attached segment">
                    <a href="#" class="ui circular icon button m-margin-tb-tiny"><i class="github icon"></i> </a>
                    <a href="#" class="ui wechat circular icon button m-margin-tb-tiny"><i class="wechat icon"></i> </a>
                    <a href="#" class="ui qq circular icon button m-margin-tb-tiny"><i class="qq icon"></i> </a>
                    <a href="#" class="ui circular icon button m-margin-tb-tiny"><i class="weibo icon"></i> </a>
                    <a href="#" class="ui circular icon button m-margin-tb-tiny"><i class="youtube icon"></i> </a>
                    <a href="#" class="ui circular icon button m-margin-tb-tiny"><i class="twitter icon"></i> </a>
                    <a href="#" class="ui circular icon button m-margin-tb-tiny"><i class="facebook icon"></i> </a>
                    <a href="#" class="ui circular icon button m-margin-tb-tiny"><i class="instagram icon"></i> </a>
                </div>

                <!--            二维码-->
                <div class="ui hidden qq popup image">
                    <img class="ui rounded bordered image" th:src="@{/images/qq.jpg}" src="../static/images/qq.jpg" style="width: 150px" alt="支付宝">
                </div>

                <div class="ui hidden wechat popup image">
                    <img class="ui rounded bordered image" th:src="@{/images/wechat.png}" src="../static/images/wechat.png" style="width: 150px" alt="微信">
                </div>

            </div>
        </div>
    </div>
</div>


<!--    底部footer-->
<div th:replace="~{_fragments::footer}"></div>


<!--外部js库-->
<div th:replace="~{_fragments::script}"></div>


<script>
    <!--移动端点击右上角按钮显示/关闭导航-->
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.qq.button').popup({
        popup: $('.qq.popup'),
        // 点击才触发
        // on : 'click',
        position: 'bottom center'
    });

    $('.wechat.button').popup({
        popup: $('.wechat.popup'),
        // 点击才触发
        on: 'hover',
        position: 'bottom center'
    });

</script>
</body>
</html>